<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script src="node_modules/mockjs/dist/mock-min.js"></script>
    <script src="mock/mock.js"></script>
    <script src="mock/api.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="root" v-cloak>
        <ul v-show="!!usersData.length">
            <li>
                <span>姓名</span>
                <span>年龄</span>
                <span>电话</span>
                <span>操作</span>
            </li>
            <li v-for="(item, key) in filterUsers" @click="clickToDel(key)">
                <span>{{item.username}}</span>
                <span>{{item.age}}</span>
                <span>{{item.phoneNumber}}</span>
                <span>删除</span>
            </li>
        </ul>
        <transition name="slide">
            <div :style="{background:'red',width:'100px',height: '100px'}" v-if="isShow" @click="isShow = false">1234</div>
        </transition>
        <ul class="ft-bar">
            <li v-for="(item, key) in ftMenu"
                @click="select(key)"
                :class="{active: key === selectedKey}"
                :key="key">
                {{item}}
            </li>
        </ul>
    </div>
</body>
<script>
    // 指令 directive
    /*
    * 循环 v-for
    * 绑定事件 v-on @
    * 绑定值 针对标签属性 v-bind [把数据模型上面的值绑定到节点的属性上面] :
    * 数据双向绑定 v-model [two ways data binding]
    * 绑定一次针对标签内容 v-once
    * 绑定文本 v-text
    * 绑定html v-html
    * 防止页面闪烁 v-cloak
    * 元素显示和隐藏
    * v-if
    * v-else
    * v-else-if
    * v-show
    * v-pre
    * */
    // 生命周期钩子hooks
    /*
    * el 被vue接管的dom解构区域， object || string
    * data 数据模型， object || function
    * methods 方法 一般绑定的事件都定义在里面  object
    * */

    var app = new Vue({
        el: '#root',
        data: {
            usersData: [],
            ftMenu:['顺序', '逆序', '移动', '小于18'],
            selectedKey: -1,
            isShow: true
        },
        methods: {
            select(key) {
                this.selectedKey = key;
                this.isShow = !this.isShow;
            },
            clickToDel(key) {
                this.filterUsers.splice(key, 1);
            }
        },
        computed: {
            // a 这个key 可以直接当做数据模型去使用 它的取值 是依赖某些变量 的返回值
            // 可计算 可缓存  他会每次把原来计算过得结果 缓存起来 如果条件不变 那么他不会从新计算
            filterUsers(){
                // 一定要有返回值
                let filterUser = {
                    '-1': () => this.usersData,
                    '0': () => this.usersData.sort((prev, next) => prev.phoneNumber - next.phoneNumber),
                    '1': () => this.usersData.sort((prev, next) => next.phoneNumber - prev.phoneNumber),
                    '2': () => this.usersData.filter(value => /^1[3458]/.test(value.phoneNumber)),
                    '3': () => this.usersData.filter(value => value.age < 18),
                };
                return filterUser[this.selectedKey]();
            },
        },
        beforeCreate() {
            axios.get('http://a.com', {params: { count: 8 }})
                .then((res) => this.usersData = res.data.data)
                .catch((error) => console.log(error))
        }
    });
</script>
</html>